<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html style="height: 100%">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="<%=basePath%>/admin/css/index.css" />
</head>
<body>
    <header>
        <h1>可视化展板-ECharts</h1>
        <div class="showTime"></div>
        <script>
            var t = null;
            t = setTimeout(time, 1000); //開始运行
            function time() {
                clearTimeout(t); //清除定时器
                dt = new Date();
                var y = dt.getFullYear();
                var mt = dt.getMonth() + 1;
                var day = dt.getDate();
                var h = dt.getHours(); //获取时
                var m = dt.getMinutes(); //获取分
                var s = dt.getSeconds(); //获取秒
                document.querySelector(".showTime").innerHTML =
                    "当前时间：" +
                    y +
                    "年" +
                    mt +
                    "月" +
                    day +
                    "-" +
                    h +
                    "时" +
                    m +
                    "分" +
                    s +
                    "秒";
                t = setTimeout(time, 1000); //设定定时器，循环运行
            }
        </script>
    </header>
<section class="mainbox">
    <div class="column">
        <div class="panel bar">
            <h2>
                房间类型统计
            </h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>较去年收入的变化</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
            <h2>住户年龄分布</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <div class="column">
        <div class="no">
            <div class="no-hd">
                <ul>
                    <li>168</li>
                    <li>188888</li>
                </ul>
            </div>
            <div class="no-bd">
                <ul>
                    <li>酒店连锁的数量</li>
                    <li>总入住人数</li>
                </ul>
            </div>
        </div>
        <div class="map">
            <div class="chart"></div>
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
        </div>
    </div>
    <div class="column">
        <div class="panel bar1">
            <h2>柱状图-技能掌握</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
            <h2>用户评价</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
            <h2>地区分布</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>
<script src="<%=basePath%>/admin/js/flexible.js"></script>
<script src="<%=basePath%>/admin/js/jquery.js"></script>
<script src="<%=basePath%>/admin/js/echarts.min.js"></script>
<script src="<%=basePath%>/admin/js/index.js"></script>
<script src="<%=basePath%>/admin/js/china.js"></script>
<script src="<%=basePath%>/admin/js/myMap.js"></script>
<script>
    //柱状图
    (function() {
        // 实例化对象
        var myChart = echarts.init(document.querySelector(".bar .chart"));
        // 指定配置和数据
        var option = {
            color: ["#2f89cf"],
            tooltip: {
                trigger: "axis",
                axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: "0%",
                top: "10px",
                right: "0%",
                bottom: "4%",
                containLabel: true
            },
            xAxis: [
                {
                    type: "category",
                    data: ${listName},
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: "8"
                        }
                    },
                    axisLine: {
                        show: true
                    }
                }
            ],
            yAxis: [
                {
                    type: "value",
                    axisLabel: {
                        textStyle: {
                            color: "rgba(255,255,255,.6)",
                            fontSize: "12"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)",
                            width: 1,
                            type: "solid"
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: "rgba(255,255,255,.1)"
                        }
                    }
                }
            ],
            series: [
                {
                    // name: "直接访问",
                    type: "bar",
                    barWidth: "35%",
                    data: ${listData},
                    itemStyle: {
                        barBorderRadius: 5
                    }
                }
            ]
        };

        // 把配置给实例对象
        myChart.setOption(option);
        //大小自适应
        window.addEventListener("resize", function() {
            myChart.resize();
        });

    })();

    //折线图
    (function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.querySelector(".line .chart"));

        // (1)准备数据
        var data = {
            year: [
                [240, 150, 181, 334, 240, 350, 330, 230, 220, 230, 210, 270],
                [230, 164, 191, 324, 290, 330, 310, 213, 230, 200, 180, 279]
            ]
        };

        // 2. 指定配置和数据
        var option = {
            color: ["#00f2f1", "#ed3f35"],
            tooltip: {
                // 通过坐标轴来触发
                trigger: "axis"
            },
            legend: {
                // 距离容器10%
                right: "10%",
                // 修饰图例文字的颜色
                textStyle: {
                    color: "#4c9bfd"
                }
                // 如果series 里面设置了name，此时图例组件的data可以省略
                // data: ["邮件营销", "联盟广告"]
            },
            grid: {
                top: "20%",
                left: "3%",
                right: "4%",
                bottom: "3%",
                show: true,
                borderColor: "#012f4a",
                containLabel: true
            },

            xAxis: {
                type: "category",
                boundaryGap: false,
                data: [
                    "1月",
                    "2月",
                    "3月",
                    "4月",
                    "5月",
                    "6月",
                    "7月",
                    "8月",
                    "9月",
                    "10月",
                    "11月",
                    "12月"
                ],
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 去除x坐标轴的颜色
                axisLine: {
                    show: false
                }
            },
            yAxis: {
                type: "value",
                // 去除刻度
                axisTick: {
                    show: false
                },
                // 修饰刻度标签的颜色
                axisLabel: {
                    color: "rgba(255,255,255,.7)"
                },
                // 修改y轴分割线的颜色
                splitLine: {
                    lineStyle: {
                        color: "#012f4a"
                    }
                }
            },
            series: [
                {
                    name: "去年收入",
                    type: "line",
                    // stack: "总量",
                    // 是否让线条圆滑显示
                    smooth: true,
                    <%--data: ${listprice}--%>
                    data: data.year[0]
                },
                {
                    name: "今年收入",
                    type: "line",
                    // stack: "总量",
                    smooth: true,
                    <%--data: ${listprice}--%>
                    data: data.year[1]
                }
            ]
        };
        // 3. 把配置和数据给实例对象
        myChart.setOption(option);

        // 重新把配置好的新数据给实例对象
        myChart.setOption(option);
        window.addEventListener("resize", function() {
            myChart.resize();
        });
    })();
</script>

<%--<script type="text/javascript" src="<%=basePath%>/admin/js/echarts.min.js"></script>--%>

<%--        <script type="text/javascript">--%>
<%--                var dom = document.getElementById("container1");--%>
<%--                var myChart = echarts.init(dom);--%>
<%--                var app = {};--%>

<%--                var option;--%>

<%--                option = {--%>
<%--                title: {--%>
<%--                    text: '房间类型统计图',--%>
<%--                    left: 'center'--%>
<%--                },--%>
<%--                  xAxis: {--%>
<%--                    type: 'category',--%>
<%--                    data: ${listName}--%>
<%--                  },--%>
<%--                  yAxis: {--%>
<%--                    type: 'value'--%>
<%--                  },--%>
<%--                  series: [--%>
<%--                    {--%>
<%--                      data: ${listData},--%>
<%--                      type: 'bar',--%>
<%--                      showBackground: true,--%>
<%--                      backgroundStyle: {--%>
<%--                        color: 'rgba(180, 180, 180, 0.2)'--%>
<%--                      }--%>
<%--                    }--%>
<%--                  ]--%>
<%--                };--%>

<%--                if (option && typeof option === 'object') {--%>
<%--                    myChart.setOption(option);--%>
<%--                }--%>
<%--                // 第二个--%>
<%--                var dom = document.getElementById("container2");--%>
<%--                var myChart = echarts.init(dom);--%>
<%--                var app = {};--%>

<%--                var option;--%>

<%--                option = {--%>
<%--                    title: {--%>
<%--                        text: '酒店营业额',--%>
<%--                        left: 'center'--%>
<%--                    },--%>
<%--                    xAxis: {--%>
<%--                        type: 'category',--%>
<%--                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']--%>
<%--                    },--%>
<%--                    yAxis: {--%>
<%--                        type: 'value'--%>
<%--                    },--%>
<%--                    series: [--%>
<%--                        {--%>
<%--                            data: [150, 230, 224, 218, 135, 147, 260],--%>
<%--                            type: 'line'--%>
<%--                        }--%>
<%--                    ]--%>
<%--                };--%>

<%--                if (option && typeof option === 'object') {--%>
<%--                    myChart.setOption(option);--%>
<%--                }--%>
<%--</script>--%>
</body>
</html>